<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数字数据</title>
    <link rel="stylesheet" href="/lib/loading/okLoading.css"/>
    <script type="text/javascript" src="/lib/loading/okLoading.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:400px;margin-top: 50px;"></div>
<script src="/lib/echarts/echarts.min.js"></script>
<script type="text/javascript">
    // var $ = layui.jquery; TODO 正常范围的显示，以及不正常范围的提示
    okLoading.close();
    var myChart = echarts.init(document.getElementById('main'));
    const oneDay = 24 * 3600 * 1000;
    let data = [];
    let now = new Date();
    let value = getRndInteger(40, 160); //正常范围
    function randomData() {
        now = new Date(+now + oneDay);
        value = value + Math.random() * 21 - 10;
        return {
            name: now.toString(), // 时间字符串化
            value: [
                [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                Math.round(value) // 四舍五入
            ]
        };
    }

    function getRndInteger(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    for (let i = 0; i < 5; i++) { // 先来5个数据看看效果
        data.push(randomData()); // 末尾添加一个随机数
    }

    var option = {
        title: {
            text: '实时脉搏检测'
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {
                    readOnly: false
                },
                restore: {},
                saveAsImage: {}
            }
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                params = params[0];
                var date = new Date(params.name); // 将randomData的Return处理
                return (
                    date.getDate() +
                    '/' +
                    (date.getMonth() + 1) +
                    '/' +
                    date.getFullYear() +
                    ' : ' +
                    params.value[1] //四舍五入后的数据
                );
            },
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        series: [
            {
                name: '脉搏数据',
                type: 'line',
                showSymbol: false,
                data: data
            }
        ],
        visualMap: {
            type: 'piecewise',
            // show: false,
            orient: 'horizontal',
            left: 'center',
            bottom: 10,
            pieces: [
                {
                    gte: 45,
                    lte: 160,
                    color: '#18BF12',
                    label: '正常'
                }, {
                    gt: 160,
                    color: '#D33C3E',
                    label: '过高危险'
                }, {
                    lt: 45,
                    color: '#650204',
                    label: '过低危险'
                }
            ],
        },
        dataZoom: [
            {
                type: 'inside',
                xAxisIndex: 0,
                minSpan: 5
            },
            {
                type: 'slider',
                xAxisIndex: 0,
                minSpan: 5,
                bottom: 50
            }
        ]
    };
    setInterval(function () {
        if (data.length < 500) {
            data.push(randomData()); // 末尾添加一个随机数
        } else {
            for (let i = 0; i < 5; i++) { // 5天为一个单位
                data.shift(); //删除第一个项目(数) : 最后删除一项是Pop
                data.push(randomData()); // 末尾添加一个随机数
            }
        }

        myChart.setOption({
            series: [
                {
                    data: data
                }
            ]
        });
    }, 1500); // 1秒更新以此
    // 使用刚指定的配置项和数据显示图表。
    option && myChart.setOption(option);
    // myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
</script>
</body>
</html>
